<template>
    <section class="main">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-news"></i> 用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div class="select-box" style="margin-bottom:20px">
                <el-select style="width:120px;margin:10px 20px;" v-model="searchInfo.type" filterable clearable placeholder="请选择">
                    
                </el-select>
                <el-input style="width:200px;" placeholder="请输入内容" clearable v-model="searchInfo.word"></el-input>
                <el-button style="margin-left:15px;" round icon="el-icon-refresh-left" type="success" plain>刷新</el-button>
                <el-button  style="margin-right:20px;" round icon="el-icon-search" plain>搜索</el-button>
                <el-button  style="margin-right:20px;" icon="el-icon-plus" @click="addGoods" type="primary" plain>添加商品</el-button>
            </div>
            <el-table :data="tableData"  v-loading="loading" border style="width: 100%" ref="userTable" >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center">
                </el-table-column>
                <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                        <span>{{scope.$index + (pageData.nowPage- 1) * pageData.pageSize + 1}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="objectId" label="ID" align="center"></el-table-column>
                <el-table-column prop="goodsLocal" label="goodsLocal" align="center"></el-table-column>
                <el-table-column prop="ownerContactNum" label="ownerContactNum" align="center"></el-table-column>
                <el-table-column prop="goodsUrl" label="goodsUrl" align="center">
                    <template  slot-scope="scope">
                        <img :src="scope.row.goodsUrl"  width="40" height="40">
                    </template>
                </el-table-column>
                <el-table-column prop="tradeState" label="tradeState" align="center"></el-table-column>
                <el-table-column prop="goodsOwner" label="goodsOwner" align="center"></el-table-column>
                <el-table-column prop="goodsTitle" label="goodsTitle" align="center"></el-table-column>
                <el-table-column prop="tradeType" label="tradeType" align="center"></el-table-column>
                <el-table-column prop="goodsContent" label="goodsContent" align="center"></el-table-column>
                <el-table-column prop="goodsType" label="goodsType" align="center"></el-table-column>
                <el-table-column prop="goodsPrice" label="goodsPrice" align="center"></el-table-column>
                <el-table-column prop="createdAt" label="创建日期" align="center" sortable></el-table-column>
                <el-table-column prop="updatedAt" label="修改日期" align="center" sortable></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="230px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="handleEdit($event, scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="pageSizeChange"
                @current-change="nowPageChange"
                :current-page="pageData.nowPage"
                :page-sizes="pageData.pageSizes"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                background
                :total="pageData.pageTotal"
                style="margin:20px 0;text-align: center;"
                >
            </el-pagination>
        </div>
        <el-dialog title="添加表单" :visible="boxInfoModel" label-width="100px" :close-on-click-modal="false"  @close="boxInfoModel=false" width="450px">
            <el-form  :model="userForm" ref="userForm" >
                <el-form-item label="goodsLocal"  prop="goodsLocal">
                    <el-input v-model="userForm.goodsLocal"></el-input>
                </el-form-item>
                <el-form-item label="ownerContactNum"  prop="ownerContactNum">
                    <el-input v-model="userForm.ownerContactNum"></el-input>
                </el-form-item>
                 <el-form-item label="上传头像">
                    <input type="file" ref='file' @change="head_change"  accept="image/*" style="display:none">
                    <el-avatar :src="userForm.goodsUrl" ></el-avatar>
                    <el-input type="text" v-model="userForm.goodsUrl" :disabled='true'>
                        <el-button type="primary" plain  slot="append" icon="el-icon-s-promotion" @click="uploadFile">选择文件</el-button>
                        <el-button type="danger" plain  slot="append" icon="el-icon-refresh-left" @click="reSetHead">恢复默认</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="tradeState"  prop="tradeState">
                    <el-input v-model="userForm.tradeState"></el-input>
                </el-form-item>
                <el-form-item label="goodsOwner"  prop="goodsOwner">
                    <el-input v-model="userForm.goodsOwner"></el-input>
                </el-form-item>
                <el-form-item label="goodsTitle"  prop="goodsTitle">
                    <el-input v-model="userForm.goodsTitle"></el-input>
                </el-form-item>
                <el-form-item label="tradeType"  prop="tradeType">
                    <el-input v-model="userForm.tradeType"></el-input>
                </el-form-item>
                 <el-form-item label="goodsContent"  prop="goodsContent">
                    <el-input v-model="userForm.goodsContent"></el-input>
                </el-form-item>
                 <el-form-item label="goodsType"  prop="goodsType">
                    <el-input v-model="userForm.goodsType"></el-input>
                </el-form-item>
                  <el-form-item label="goodsPrice"  prop="goodsPrice">
                    <el-input v-model="userForm.goodsPrice"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="boxInfoModel=false">取消</el-button>
                <el-button @click="makeSure" type="primary">确定</el-button>
            </div>
        </el-dialog>
       
    </section>
</template>

<script>
    import {Goods} from '@/api/goods'
    import {User} from '@/api/user'
    import MD5 from 'md5';
    export default {
        data() {
            return {
                tableData: [],//用户列表
                pageData:{//分页数据
                   nowPage:1,
                   pageSizes:[5,10,20,50,100],
                   pageSize:5,
                   pageTotal:0,
                },
                userForm:{},//用户信息表单数据
                searchInfo:{//搜索数据
                    type:'',
                    word:''
                },
                boxInfoModel:false,
                loading: true//表格加载状态
            }
        },
        components:{
        },
        created() {
            this.getData()
        },
        methods: {
            getData(){
                Goods.get(this.pageData).then(res=>{
                    this.tableData = res.results
                    this.pageData.pageTotal = res.count
                    this.loading = false
                    console.log(res)
                })
            },
            handleEdit(){

            },
            handleDelete(){

            },
            head_change(fileObj){//用户头像改变事件
                User.upFile(fileObj).then((res)=>{//注册用户
                    this.userForm.goodsUrl=res[0].url;
                }).catch(err => {
                    // this.setMsg(true,'error',"错误码：" + err.code+"错误原因：" + err.error)
                });
            },
            uploadFile(){//点击上传文件
                this.$refs.file.click();
            },
            reSetHead(){//重置头像
                this.userForm.goodsUrl='static/img/img.jpg'
            },
            addGoods(){
                this.boxInfoModel = true
            },
            makeSure(){
                Goods.set(this.userForm).then(res=>{
                   console.log(res)
               })
            },
            pageSizeChange(e){//表格每页显示数量改变
               this.pageData.pageSize=e
               this.getData()
            },
            nowPageChange(e){//表格当前页改变
               this.pageData.nowPage=e
               this.getData()
            },
        }
    }

</script>

<style scoped>
</style>
